<template>
	<view class="">
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b">
					<view class="acea-row row-middle row-right online">
						<view class="">层高</view>
						<input class="input-r" type="text" v-model="cenggao" name='cenggao'>
						<view class="">m </view>
						<view>进深</view>
						<input class="input-r" type="text" v-model="jianshen" name='jianshen'>
						<view class="">m</view>
						<view>开间</view>
						<input class="input-r" type="text" v-model="kaijian" name='kaijian'>
						<view class="">m </view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label ">店招</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" v-model="dianzhao1">x
						<input type="number" v-model="dianzhao2">
						<text>m²</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label ">承重</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:300" v-model="chengzhong" name='chengzhong'>
						<text>g/m²</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">配套设施</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(1)">
						<view class="no-data-r" v-if=" sspre&&sspre.length == 0 || !sspre">请选择配套设施</view>
						<view v-else><span v-for="item in sspre" :key='item.id'> {{item.name}} , </span></view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">临路类型</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(2)">
						<view class="no-data-r" v-if=" linLuType&&linLuType.length == 0 || !linLuType">请选择临路类型</view>
						<view v-else><span v-for="item in linLuType" :key='item.id'> {{item.name}} , </span></view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">临路状况</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(3)">
						<view class="no-data-r" v-if="roadCondition&&roadCondition.length == 0 || !roadCondition ">请选择临路状况</view>
						<view v-else><span v-for="item in roadCondition" :key='item.id'> {{item.name}} , </span></view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">装修</view>
					<!-- <view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="no-data-r">请选择</view>
				</view> -->
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<picker @change="renovationChange" :value="renovationIndex" :range="renovationList"
							range-key="name">
							<view :class="renovationName ?'' :'no-data-r'">{{renovationName ? renovationName : '请选择'}}
							</view>
						</picker>
					</view>
				</view>
			</view>
			<button class="submit-btn" form-type="submit">
				完成
			</button>

			<dictionaryType @popupClose="openPopupShow = false" :gids='gids' @clickOk='clickOk' v-if="openPopupShow"
				:key="gids" :popupShow='openPopupShow' />
		</form>
	</view>
</template>

<script>
	import {
		Debounce
	} from '@/utils/validate.js'
	import dictionaryType from '../components/dictionaryType.vue'
	import {
		ShopRentDetailApiNoDw,
		editInfo
	} from "@/api/subletOfShop.js"
	export default {
		components: {
			dictionaryType
		},
		data() {
			return {
				cenggao: '',
				jianshen: '',
				kaijian: '',
				dianzhao1: '',
				dianzhao2: '',
				chengzhong: '',
				gids: '',
				openPopupShow: false,
				sspre: [],
				roadCondition: [],
				linLuType: [],
				renovationList: [{
					id: 0,
					name: '没有'
				}, {
					id: 1,
					name: '有'
				}, {
					id: 2,
					name: '不限'
				}],
				renovationName: '',
				renovationIndex: 0,
				id: ''
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getDetail()
			}
		},
		methods: {
			formSubmit: Debounce(function(e) {
				let that = this
				e.detail.value.dianzhao = that.dianzhao1 + '-' + that.dianzhao2
				e.detail.value.renovation = that.renovationList[that.renovationIndex].id
				e.detail.value.linLuType = this.linLuType.map(item => item.id).join(",")
				e.detail.value.supportingFacility = this.sspre.map(item => item.id).join(",")
				e.detail.value.roadCondition = this.roadCondition.map(item => item.id).join(",")
				e.detail.value.id = this.id;
				// uni.$emit("shopSaleC", e.detail.value);
				// uni.navigateBack()
				editInfo(e.detail.value).then(res=>{
					if(res.code == 200){
						that.$util.Tips({
							title: '完善成功'
						}, {
							tab: 2,
							url: '/pages/releases/rentalStores/rentalStores'
						})
					}else{
						that.$util.Tips({
							title: res.message
						})
					}
				}).catch(e=>{
					that.$util.Tips({
						title: e
					})
				})
			}),
			renovationChange(e) {
				this.renovationIndex = e.detail.value
				this.renovationName = this.renovationList[this.renovationIndex].name
			},
			opendiction(val) {
				this.openPopupShow = true
				if (val == 1) {
					// 配套设施
					this.gids = 15
				} else if (val == 2) {
					// 林路类型
					this.gids = 16
				} else if (val == 3) {
					// 临路状况
					this.gids = 26
				}
			},
			clickOk(val) {
				if (this.gids == 15) {
					this.sspre = val
				}
				if (this.gids == 26) {
					this.roadCondition = val
				}
				if (this.gids == 16) {
					this.linLuType = val
				}
				this.$forceUpdate();
				this.openPopupShow = false
			},
			ft(ids, names) {
				if(!ids){
					return '';
				}
				names = names.split('/')
				return ids.split(',').map((item, index) => ({
					id: item,
					describe: names[index],
					name: names[index]
				}))
			},
			fp(list, key, value) {
				return list.filter(item => item[key] == value)[0]
			},
			getDetail() {
				ShopRentDetailApiNoDw(this.id).then(res => {
					console.log('editShop', res)
					if (res.code == 200) {
						this.dataform = res.data
						let notFiled = [ 'linLuType', 'sspre','renovation']
						let d = res.data
						for (let k in this.dataform) {
							if (this.hasOwnProperty(k)) {
								if (notFiled.indexOf(k) == -1) {
									this[k] = this.dataform[k]
								}

							}
						}
						let renovation = this.fp(this.renovationList,'id',d.renovation);
						this.renovationName = renovation?renovation.name:''
						this.linLuType = this.ft(d.linLuType, d.linLuTypeName)
						this.roadCondition = this.ft(d.roadCondition, d.roadConditionName)
						this.sspre = this.ft(d.supportingFacility, d.supportingFacilityName)
						this.dianzhao1 = d.dianzhao?d.dianzhao.split('-')[0]:''
						this.dianzhao2 =d.dianzhao? d.dianzhao.split('-')[1]:''

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.list .item-r {
		width: calc(100% - 180rpx);
	}

	.item .small-ipt {
		// width: calc(100% - 140rpx);
		width: 60%;

	}

	.item .small-ipt input {
		display: block;
		width: 130rpx;
		text-align: right;
	}
</style>